import { useEffect, useState } from 'react'
import axios from './utils/axios'
import { Switch, Route } from 'react-router-dom'
import Home from './pages/home'
import Mine from './pages/mine'
import Friends from './pages/friends'
import Dynamic from './pages/dynamic'
import Tabs from './components/tabs'
import Login from './pages/login'
import RoomDetail from './pages/room-detail'
import AddFriendAndGroup from './pages/home/addFriendAndGroup'
import CreateGroup from './pages/home/create-group'
import ApplyList from './pages/friends/apply-list'
import Edit from './pages/mine/edit'
import DynamicDetail from './pages/dynamic/dynamic-detail'
import AddDynamic from './pages/dynamic/add-dynamic/add-detail'
import InfoDetail from './pages/room-detail/info-detail'
import './index.scss'
import { useHistory } from 'react-router-dom'
import EditDetail from './pages/mine/edit/edit-detail'
import MyDynamic from './pages/mine/my-dynamic'
import PullRefresh from './components/pull-refresh'

function App() {
  let history = useHistory()
  const [showTabs, setShowTabs] = useState('block')
  useEffect(() => {
    // 第一次加载会执行
    getStatus()
    // 添加路由监听函数,每次路由变化都会执行这个方法
    history.listen((historyLocation) => {
      // 有些页面不用显示tabs
      if (
        historyLocation.pathname === '' ||
        historyLocation.pathname === '/login' ||
        historyLocation.pathname === '/roomDetail' ||
        historyLocation.pathname === '/addFriendAndGroup' ||
        historyLocation.pathname === '/applyList' ||
        historyLocation.pathname === '/edit' ||
        historyLocation.pathname === '/dynamic-detail' ||
        historyLocation.pathname === '/add-detail' ||
        historyLocation.pathname === '/edit-detail' ||
        historyLocation.pathname === '/create-group' ||
        historyLocation.pathname === '/roomDetail/info-detail' ||
        historyLocation.pathname === '/mine/my-dynamic'
      ) {
        setShowTabs('none')
      } else {
        setShowTabs('block')
      }
    })

    // 组件卸载时会调用
    return () => {}
  })
  const getStatus = () => {
    axios
      .get('/login/status')
      .then((res) => {
        // console.log(res)
        // 用户未登录直接跳转到登录页面
        if (res.data.status !== 200) {
          history.replace('/login')
        } else if (
          // 已经登录却还在登录页面,则跳到home页
          res.data.status === 200 &&
          (history.location.pathname === '/' ||
            history.location.pathname === '/login')
        ) {
          history.replace('/home')
        }
      })
      .then(() => {
        // 有些页面不用显示tabs
        if (
          history.location.pathname === '' ||
          history.location.pathname === '/login' ||
          history.location.pathname === '/roomDetail' ||
          history.location.pathname === '/addFriendAndGroup' ||
          history.location.pathname === '/applyList' ||
          history.location.pathname === '/edit' ||
          history.location.pathname === '/dynamic-detail' ||
          history.location.pathname === '/add-detail' ||
          history.location.pathname === '/edit-detail' ||
          history.location.pathname === '/create-group' ||
          history.location.pathname === '/roomDetail/info-detail' ||
          history.location.pathname === '/mine/my-dynamic'
        ) {
          setShowTabs('none')
        } else {
          setShowTabs('block')
        }
      })
  }
  return (
    <div className="app-box">
      <Switch>
        <Route exact path="/home" component={Home} />
        <Route exact path="/mine" component={Mine} />
        <Route exact path="/dynamic" component={Dynamic} />
        <Route exact path="/friends" component={Friends} />
        <Route exact path="/roomDetail" component={RoomDetail} />
        <Route exact path="/login" component={Login} />
        <Route exact path="/" component={Login} />
        <Route exact path="/applyList" component={ApplyList} />
        <Route exact path="/addFriendAndGroup" component={AddFriendAndGroup} />
        <Route exact path="/edit" component={Edit} />
        <Route exact path="/edit-detail" component={EditDetail} />
        <Route exact path="/dynamic-detail" component={DynamicDetail} />
        <Route exact path="/add-detail" component={AddDynamic} />
        <Route exact path="/create-group" component={CreateGroup} />
        <Route exact path="/roomDetail/info-detail" component={InfoDetail} />
        <Route exact path="/mine/my-dynamic" component={MyDynamic} />
      </Switch>
      <Tabs showTabs={showTabs}></Tabs>
    </div>
  )
}

export default App
